<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
 <script type="text/javascript" src="../jQuery-2.1.4.min.js" ></script>
  <script src="../dom/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
	
	
	</head>
	
	
	<style>
		.xx{
			width: 900px;
			height: 200px;
			background-color: #ccc;
			padding: 30px;
			margin: 30px;
			/*overflow: hidden;*/
		}
		.subxx{
			width: 180px;
			height: 100%;
			background-color: #007FFF;
			float: left;
			border: 1px solid royalblue;
			margin:2px;
			/*z-index: 99;*/
		}
		.subxx2{
			width: 180px;
			height: 100%;
			background-color: green;
			float: left;
			border: 1px solid royalblue;
			margin: 2px;
			/*z-index: 99;*/
		}
	</style>
	<body>
		<div id="test11"  class="xx" >
			<div id="a1" class="subxx">11111</div>
			<div id="a2" class="subxx">22222</div>
			<!--
			<div class="subxx2 ui-sortable-placeholder" style="visibility: hidden; width: 294px;"></div>
		-->
		</div>
		<div id="test22"  class="xx">
			<div id="a3"  class="subxx2">3333333</div>
			<div id="a4" class="subxx2">4444</div>
		</div>
		<div id="test22"  class="xx" style="height: 120px;">
			
			
		</div>
		<script>
		/*function test (){
			$( ".xx" ).sortable({
			 	connectWith: ".xx"
		    }).disableSelection();
		}
		*/	
		 
		    
    function test1(){
    	  $( ".xx div" ).draggable({ 
    	  	revert: "invalid" ,
    	  	start:function(event,ui){
      			$(this).css("z-index",99);
    	  	},
    	  	 stop:function(event,ui){
		      	$(this).css("z-index",0);
		    }
    	  });//被拖拽元素
	    $( ".xx" ).droppable({//放置的容器
	    	 accept: ".xx div",//接受被放置的选择器
	    		
	          drop: function( event, ui ) {
//				console.log(JSON.stringify(ui.draggable))
//					console.log(11111)
				
				var pnode = ui.draggable.parent();
				var x= ui.draggable.position().left;
				var w = $(this).width();
				var n = $(this).children().length+1;
				var index = Math.floor(x/(w/n));
				var z = x%(w/n);
				if(z>(w/n)/2){
					index ++;
				}
//				console.log(index)
				ui.draggable.css("top",0).css("left",0);
				if(index<$(this).children().length){
					var v = $(this).children().get(index);
//					console.log(v)
					$(v).before(ui.draggable);
					
				}else{
					$(this).append(ui.draggable)
				}
				autoWidth(pnode)
	     		autoWidth($(this)); 
//	     		$(this).css("overflow",ov);
	    	}
	    });
    }
    
			$(function(){
				test1()
				autoWidth($("#test11")); 
				autoWidth($("#test22")); 
//				docChange();
			});
			
			function sumNum (ml,mr,pl,pr,bl,br){
				return toNum(ml)+toNum(mr)+toNum(pl)+toNum(pr)+toNum(bl)+toNum(br);
			}
			function toNum(str){
				var num = str.substring(0,str.indexOf("px"))
				return parseInt(num);
			}
			
			function autoWidth(doc){
//				doc 改变的盒子节点
//				console.log($(docId).attr("id"));

				var w = $(doc).width();
				var n = $(doc).children().length;
				var num = 0;
				$(doc).children().each(function(i,ele){
					var ml = $(ele).css("margin-left");
					var mr = $(ele).css("margin-right");
					var pl = $(ele).css("padding-left");
					var pr = $(ele).css("padding-right");
					var bl = $(ele).css("border-left-width");
					var br = $(ele).css("border-right-width");
					num += sumNum(ml,mr,pl,pr,bl,br);
				});
				var subw = (w-num)/n;
//				$(doc).children().width(subw);
				
				$(doc).children().animate({width:subw+'px'},'fast');//fast slow
			}//
			
			function docChange(){
//				console.log(11)
				 var arr = {};
				$('.xx').bind('DOMNodeInserted', function(e) {
					var id = $(this).attr("id");//改变的盒子
					arr[id]=id;
				//  alert('element now contains: ' + $(e.target).html());
				//		console.log(e)
					var eleid = $(e.target).attr("id");//被拖拽元素
					var str = '<div id="'+eleid+'" style="width:280px;" class="subxx2">555</div>'
//					var ht = $(e.target).html();
//					$(this).find("div").width(280);
					var k = Object.keys(arr); //2个盒子
					if(k.length>1){
						$("#"+k[0]).find("#"+eleid).remove();//拖拽前的 
//						var l1 = $("#"+k[0]).children().length;
//						var l1 = $("#"+k[0]).html();
//						console.log(l1)
						autoWidth($("#"+k[0]));
						$("#"+k[k.length-1]).find(".ui-sortable-placeholder").remove();
						var cc = $("#"+k[k.length-1])
								.find(".ui-sortable-placeholder")
								.attr("class");
						var cc1 = $("#"+k[0])
								.find(".ui-sortable-placeholder")
								.attr("class");
						console.log(cc1)
						console.log(cc)
						$("#"+k[k.length-1]).find("#"+eleid).replaceWith(str);//拖拽后的盒子
						autoWidth($("#"+k[k.length-1]));
//						var l2 = $("#"+k[k.length-1]).children().length;
						var l2 = $("#"+k[k.length-1]).html();
						
						console.log(l2)
						 arr = {};
					}
				});
			}
		</script>
	</body>
</html>
